<template>
  <div class="poster-box">
    <div class="poster-con" ref="posterconRef"></div>
    <div class="poster-mask"></div>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import { ref } from "vue";
export default {
  name: "tPoster",
  props: {
    qrUrl: {
      type: String,
      default: "",
    },
  },
  setup() {
    const posterconRef = ref();
    const download = () => {
      return html2Canvas(posterconRef.value, {
        backgroundColor: "transparent",
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        scrollY: 0,
        scrollX: 0,
      })
        .then((canvas) => {
          const dataURL = canvas.toDataURL("image/png");
          // const creatDom = document.createElement("a");
          // document.body.appendChild(creatDom);
          // creatDom.href = dataURL;
          // creatDom.download = "图片";
          // creatDom.innerHTML = "下载";
          // creatDom.click();
          return dataURL;
        })
        .catch((err) => {
          console.log("海报：", err);
        });
    };
    return {
      posterconRef,
      download,
    };
  },
};
</script>

<style scoped lang="stylus">
.poster-box {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: -100;

  .poster-con {
    width: 6.48rem;
    height: 10.58rem;
    border-radius: .2rem;

  }

  .poster-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color #5C260F
  }
}
</style>
